import { useEffect, useContext, useState } from "react"
import ReactMarkdown from 'react-markdown';

import { ConnContext } from "../contexts/Conn";



import ZustForm from "./ZustForm";
import ZustTable from "./ZustTable";
import Side from '../common/Side';

import styles from './deck.module.css';

const Deck = () => {

  const {send, cast, release} = useContext(ConnContext);

  const [pageSpec, setPageSpec] = useState();

  useEffect(() => {
    cast('page', setPageSpec);
    send('page', {path: '/main'});

    return () => {
      release('page', setPageSpec);
    }
  }, []);

  let deckElem;

  switch (pageSpec?.['page-type']) {

    case undefined :
      deckElem = <div>正在载入</div>
      break;

    case 'entry' :
      deckElem = <ZustForm {...pageSpec['page-content']} />
      break;
    
    case 'table' :    
      deckElem = <ZustTable {...pageSpec['page-content']} />
      break;

    default :
      console.log(pageSpec['page-content']);
      deckElem = <ReactMarkdown children={pageSpec['page-content']} />
  }

  return <div className={styles['deck']}>
    <Side list={pageSpec?.['link-to'] ?? []} />
    <div className={styles['content']}>{deckElem}</div>
  </div>

}

export default Deck;